<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="/static/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3">

  <title>PCM repository browser</title>
  <style>
    html {
      font-size: 0.9rem;
    }

    @media (min-width: 544px) {
      html {
        font-size: 1rem;
      }
    }

  </style>
</head>

<body>
  <script src="/static/url.js"></script>
  <script src="/static/pcm.js"></script>

  <div class="container-xxl d-flex flex-column vh-100">

    <h1 class="text-center p-4 d-none d-md-block">PCM repository browser</h1>

    <div class="container-fluid flex-grow-1 d-flex flex-column px-0 my-2">

      <div class="container-fluid px-0">
        <div class="input-group mb-3">
          <input type="text" id="repository-url" class="form-control" placeholder="Repository URL"
            aria-label="Repository URL" value="https://repository.kicad.org/repository.json">
          <button type="button" class="btn btn-primary" onclick="PCM.loadRepository()">Load</button>
        </div>
      </div>

      <nav id="package-types" class="nav nav-tabs bg-light">
      </nav>
      <div class="container-fluid bg-light flex-grow-1 position-relative">
        <div id="loading" class="d-flex position-absolute align-items-center justify-content-center w-100 h-100"
          style="top: 0; left: 0; z-index: 10000; background-color: #00000060;">
          <div class="spinner-border text-light" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
        </div>
        <div class="d-flex position-absolute justify-content-center w-100 p-4"
          style="top: 0; left: 0; z-index: 11000; pointer-events: none;">
          <div id="alert" class="alert alert-success fade"></div>
        </div>
        <div class="row h-100">
          <div class="col-12 col-md-6 p-0 position-relative overflow-auto">
            <div class="input-group d-flex sticky-top">
              <img class="input-group-text p-2" src="/static/img/search.svg">
              <input type="text" class="flex-grow-1 border-light" placeholder="Search"
                oninput="PCM.searchChange(this.value)">
            </div>
            <div id="package-cards" class="position-absolute w-100">
            </div>
          </div>
          <div class="col-12 col-md-6 p-0 border border-dark overflow-auto position-relative">
            <div id="package-details" class="position-absolute w-100 p-3" style="word-break: break-word;"></div>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

</html>
